<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>结算记录</cite></a>
  </div>
</div>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row">
            <div class="layui-form" style="margin-bottom: 10px;">
              <div class="layui-form-item" style="margin:0;">
                <div class="layui-input-inline">
                  <input type="text" name="startTime" id="startTime" autocomplete="off" placeholder="开始时间" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="endTime" id="endTime" autocomplete="off" placeholder="结束时间" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <select name="status" id="status" lay-search="">
                    <option value="">结算状态</option>
                    <option value="2">已审核</option>
                    <option value="4">打款中</option>
                    <option value="5">打款成功</option>
                    <option value="6">打款失败</option>
                  </select>
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="settOrderId" id="settOrderId" autocomplete="off" placeholder="结算单号" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="accountName" id="accountName" autocomplete="off" placeholder="账户名" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="accountNo" id="accountNo" autocomplete="off" placeholder="账号" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width: 250px;">
                  <button id="search" class="layui-btn" data-type="reload">搜索</button>
                </div>
              </div>
            </div>
          </div>
          <table id="Code_QRCode_dataAll" lay-filter="Code_QRCode_dataAll"></table>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="operateBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
  {{#  if(d.status == 2 || d.status == 4){ }}
  <a class="layui-btn layui-btn-xs" lay-event="remit">打款</a>
  {{#  } }}
</script>

<script>
layui.use(['admin', 'table', 'util', 'laydate'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,table = layui.table
  ,element = layui.element
  ,laydate = layui.laydate
  ,form = layui.form;

  element.render('breadcrumb', 'breadcrumb');

  var tplAccountAttr = function (d) {
    if (d.accountAttr == 0) {
      return "<span style='color: orange'>对私</span>";
    } else if (d.accountAttr == 1) {
      return "<span style='color: darkgreen'>对公</span>";
    }
  };

  var tplAccountType = function (d) {
    if (d.accountType == 1) {
      return "银行卡转账";
    } else if (d.accountType == 2) {
      return "微信转账";
    } else if (d.accountType == 3) {
      return "支付宝转账";
    }
  };

  var tplStatus = function(d){
    if(d.status == 1) {
      return "<span style='color: red'>等待审核</span>";
    }else if(d.status == 2) {
      return "<span style='color: darkgreen'>已审核</span>";
    }else if(d.status == 3) {
      return "<span style='color: indigo'>审核不通过</span>";
    }else if(d.status == 4) {
      return "<span style='color: blueviolet'>打款中</span>";
    }else if(d.status == 5) {
      return "<span style='color: blue'>打款成功</span>";
    }else if(d.status == 6) {
      return "<span style='color: black'>打款失败</span>";
    }
  };

  //用户列表
  table.render({
    elem: '#Code_QRCode_dataAll'
    ,url: layui.setter.baseUrl + '/sett/list'
    ,where: {
        access_token: layui.data(layui.setter.tableName).access_token
    }
    ,id: 'tableReload'
    ,page: true
    ,cols: [[
      {field: 'settOrderId', title: '结算单号', width: 180}
      ,{field: 'bankName', title: '银行名称'}
      ,{field: 'bankNetName', title: '开户网点'}
      ,{field: 'province', title: '开户行省'}
      ,{field: 'city', title: '开户行市'}
      ,{field: 'accountName', title: '账户名'}
      ,{field: 'accountNo', title: '账号'}
      ,{field: 'amount', title: '金额'}
      ,{field: 'status', title: '状态', templet: tplStatus}
      ,{field: 'createTime', title: '申请时间', templet: '<div>{{ layui.util.toDateString(d.createTime, "MM-dd HH:mm:ss") }}</div>'}
      ,{field: 'edit', title: '操作', width: 130, toolbar: '#operateBar' }
    ]]
    ,skin: 'line'
  });

  //监听工具条
  table.on('tool(Code_QRCode_dataAll)', function (obj) {
    var data = obj.data;
    if (obj.event === 'detail') {
      location.hash = "/sett/detail/id=" + data.id;
    } else if (obj.event === 'remit') {
      location.hash = "/sett/remit/id=" + data.id;
    }
  });

  var $ = layui.$, active = {
    reload: function(){
      var startTime = $('#startTime').val();
      var endTime = $('#endTime').val();
      var status = $('#status').val();
      var settOrderId = $('#settOrderId').val();
      var accountName = $('#accountName').val();
      var accountNo = $('#accountNo').val();

      table.reload('tableReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          createTime : startTime,
          updateTime : endTime,
          status : status,
          settOrderId: settOrderId,
          accountName: accountName,
          accountNo: accountNo
        }
      });
    }
  };
  $('#search').on('click', function() {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

  laydate.render({
    elem: '#startTime'
    ,type: 'datetime'
    ,format: 'yyyy-MM-dd HH:mm:ss'
  });

  laydate.render({
    elem: '#endTime'
    ,type: 'datetime'
    ,format: 'yyyy-MM-dd HH:mm:ss'
  });
  // 渲染表单
  form.render();
});
</script>